<template>
    <div class="container">
        <div style="height: 20px;"></div>
        <!-- 内容展示 -->
        <div class="info">
            <div style="width: 90%;margin-left: 5%;">
                <div style="height: 10px;"></div>
                <div style="display: flex;align-items: center;padding: 10px;">
                    <div class="head-img">
                        <image :src="base+'/profile/farm_photo/2024/06/14/jiaofei_20240614152348A012.png'"  mode="scaleToFill"/>
                    </div>
                    <div style="width: 15rpx;"></div>
                    <div>
                        <div style="font-size: 18px;">司机</div>
                        <div style="font-size: 13px;">13444444444</div>
                    </div>
                </div>
            </div>
            <div class="line-white"></div>
            <!-- 其他区域 -->
            <div style="height: 10px;"></div>
            <div style="padding: 10px;width: 90%;margin-left: 5%;">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                        <image :src="base+'/profile/farm_photo/2024/06/14/help_20240614152234A007.png'"  mode="scaleToFill"/>
                        <div style="width: 15px;"></div>
                        <div>帮助</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#609872" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div style="height: 30px;"></div>
            <div style="padding: 10px;width: 90%;margin-left: 5%;" @click="report">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                            <image :src="base+'/profile/farm_photo/2024/06/14/time_20240614152643A025.png'"  mode="scaleToFill"/>
                        <div style="width: 15px;"></div>
                        <div>年度报告</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#609872" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
            <div style="height: 30px;"></div>
            <div style="padding: 10px;width: 90%;margin-left: 5%;" @click="set">
                <div style="display: flex;align-items: center;justify-content: space-between;">
                    <div class="flex-image" style="display: flex;align-items: center;">
                            <image :src="base+'/profile/farm_photo/2024/06/14/set_20240614152621A023.png'"  mode="scaleToFill"/>
                        <div style="width: 15px;"></div>
                        <div>设置</div>
                    </div>
                    <div style="display: flex;align-items: center;">
                        <u-icon color="#609872" name="arrow-right"></u-icon>
                        <div style="width: 10px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    methods: {
        // 跳转设置页面
        set(){
            uni.navigateTo({ url: '/pagesDriver/system/set' })
        },
        // 跳转年度报告
        report(){
            uni.navigateTo({ url: '/pagesScreen/index/pagesDriverReport' })
        }
    },
    onLoad(){
        uni.hideHomeButton();
    }
    
}
</script>
<style lang="scss">
.container{
    height: 100vh;
    width: 100vw;
    background: #F6F3E8;
    color: #1A512C;
}
.info{
    background: #CCE1C8;
    border-radius: 20px;
    width: 90%;
    margin-left: 5%;
    height: 80vh;
}
.head-img image{
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
}
.flex-image image{
    width: 50rpx;
    height: 50rpx;
    border-radius: 50%;
}
.line-white{
    height: 4rpx;
    width: 90vw;
    background: #fff;
}
</style>